<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page language="java" import="com.java.model.User" %>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 支持响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人日记本登录</title>
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/bootstrap/js/jQuery.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
<!-- 获取cookies功能 -->
<%
	/* 读取cookie，首先这里需要判断，
	若是用户第一次登陆，则需要记录并读取cookie，
	若用户登陆错误重新返回到登录界面，这里前台会自动显示错误信息，不需要再读取了 */
	
	//前台没有传过来user，则说明用户是第一次登陆，这就需要记录并读取cookie
	if(request.getAttribute("user")==null){  
		String userName=null;
		String passWord=null;
		//从浏览器获取所有的cookies
		Cookie[] cookies=request.getCookies();
		for(int i=0;cookies!=null && i<cookies.length;i++){
			//如果读取到了前台传来的key（用getName()方法来获取cookie的key），也就是user，那么就遍历出来
			if(cookies[i].getName().equals("user")){
				//通过cookie的键key来获取cookie的值value
				userName=cookies[i].getValue().split("-")[0];
				passWord=cookies[i].getValue().split("-")[1];
			}
		}
		
		if(userName==null){
			userName="";
		}
		if(passWord==null){
			passWord="";
		}
		
		//EL表达式中采用pageContext范围，优先级最高
		pageContext.setAttribute("user", new User(userName,passWord));
	}
%>
<!-- 登录页面的样式css -->
<style type="text/css">
	  body {
        padding-top: 200px;
        padding-bottom: 40px;
        background-image: url('images/star.gif');
      }
      
      .form-signin-heading{
      	text-align: center;
      }

      .form-signin {
        max-width: 300px;
        padding: 19px 29px 0px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .form-signin .form-signin-heading,
      .form-signin .checkbox {
        margin-bottom: 10px;
      }
      .form-signin input[type="text"],
      .form-signin input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
      }
</style>
<!-- 登录功能逻辑判断 -->
<script type="text/javascript">
	function checkForm(){
		var userName=document.getElementById("userName").value;
		var passWord=document.getElementById("passWord").value;
		if(userName==null||userName==""){
			document.getElementById("error").innerHTML="用户名不能为空!";
			return false;
		}
		if(passWord==null||passWord==""){
			document.getElementById("error").innerHTML="密码不能为空!";
			return false;
		}
		return true;
	}
</script>
</head>
<body>
<div class="container">
     <form name="myForm" class="form-signin" action="login" method="post" onsubmit="checkForm()">
        <h2 class="form-signin-heading">日记本系统</h2>
        <input id="userName" name="userName" value="${user.userName }" type="text" class="input-block-level" placeholder="姓名...">
        <input id="passWord" name="passWord" value="${user.passWord }"  type="password" class="input-block-level" placeholder="密码..." >
        <label class="checkbox">
          <input id="remember" name="remember" type="checkbox" value="remember-me" checked="checked">记住我 &nbsp;&nbsp;&nbsp;&nbsp; <font id="error" color="red">${error }</font>  
        </label>
        <button class="btn btn-large btn-primary" type="submit">登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-large btn-primary" type="button" >重置</button>
		<p align="center" style="padding-top: 15px;">版权所有  2019 Colin </p>
     </form>
</div>
</body>
</html>